<template>
  <view class="container">
    <!-- <slide-show></slide-show> -->
    <background>
      <template v-slot:body>
        <view class="title">{{ title }}</view>
        <view class="desc">{{ desc }}</view>
      </template>
    </background>
    <view class="content">
      <select-school
        @prickerConfirm="prickerConfirm"
        :schoolName="schoolName"
        :columns="columns"
        :columnData="columnData"
      ></select-school>
      <card>
		  <template v-slot:header>
		    <text>基础服务</text>
		  </template>
        <u-grid :border="false" col="4">
          <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
            <grid-item
              :name="listItem.name"
              :title="listItem.title"
              :url="listItem.url"
              :open_id="open_id"
              :school_id="school_id"
            />
          </u-grid-item>
        </u-grid>
      </card>
    </view>
  </view>
</template>

<script>
import background from "@/components/Background/index";
import Card from "@/components/Card/index";
import slide from "../../components/SlideShow/SlideShow.vue";
import item from "../../components/IndexItem/index.vue";
import selectSchool from "../../components/SelectSchool/index.vue";
import GrideItem from "@/components/GridItem/index";
import { mapGetters } from "vuex";

import {
  setSchoolInfo,
} from "../../utils/author";
import { parseTime, getNoon } from "@/utils/utils";

import {
  getPickerDatas,
} from "../../api/Home/index";

export default {
  data() {
    return {
      //学校名称
      // schoolName: "云南师范大学",
      title: "",
      desc: "",
      columns: [],
      columnData: [],
      list: [
        {
          name: "car",
          title: "自助打印",
          url: "/pages/printer/AutoPrinter/index?program=0",
          program: 0,
        },
        {
          name: "file-text",
          title: "加急打印",
          url: "/pages/printer/AutoPrinterDelivery/index?program=1",
          program: 1,
        },
      ],
      open_id: undefined,
      school_id: undefined,
    };
  },
  components: {
    "slide-show": slide,
    item: item,
    "select-school": selectSchool,
    background,
    card: Card,
    "grid-item": GrideItem,
  },
  computed: {
    ...mapGetters(["schoolId", "openId", "schoolName", "nickName"]),
  },
  onLoad() {
    const weeks = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    this.title = `${this.nickName}，${getNoon()}`;
    this.desc = `今天是${parseTime(new Date(), "{y}年{m}月{d}日")} ${
      weeks[new Date().getDay()]
    }`;
    this.getPickerDatas();
  },
  methods: {
    /**
     * select-school 组件确认选择学校后触发改事件
     * 然后将选择的结果提交到后端,并在storage中进行存储
     * @param {Object} item {id:"YNNU",label:"云南师范大学"}
     */
    prickerConfirm(item) {
      this.$store
        .dispatch("UpdateSchoolInfo",{openId:this.openId, schoolId:this.schoolId,schoolName:item.schoolName})
        .then((result) => {
          uni.showToast({
            title: "选择学校成功!",
            icon: "success",
            duration: 2000,
          });
          setSchoolInfo(JSON.stringify(item));
        })
        .catch((err) => {
          uni.showToast({
            title: "选择学校失败!",
            icon: "error",
            duration: 2000,
          });
        });
    },
    /**
     * 获取picker学校选择器有关的数据
     */
    getPickerDatas() {
      getPickerDatas()
        .then((result) => {
          const { columns, columnData } = result.data;
          const array = columns[0].map((item) => {
            return item.areaName;
          });
          columns[0] = array;
          this.columns = columns;
          this.columnData = columnData;
        })
        .catch((err) => {
          this.columns = [];
          this.columnData = [];
        });
    }
  },
};
</script>

<style lang="scss">
.container {
  background-color: #f6f7f4;
  .content {
    padding: $uni-padding-20;
    margin-top: -60px;
    background: #fff;
    height: 100%;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  .title {
    color: #fff;
    font-size: 40rpx;
    padding: 20rpx;
  }
  .desc {
    color: #8aabd3;
    padding-left: 10rpx;
  }
}
</style>
